<template>
  <div class="report-container">
    <div class="report-title">
      <h1>转轴车间生产看板</h1>
    </div>

    <div class="report-main">
      <div class="con-left">
        <SimEcharts height="32%" class="e-chart-border" :chart-data="annularPieDataTop"/>
        <SimEcharts height="32%" class="e-chart-border" :chart-data="annularPieDataSecond"/>
        <SimEcharts height="32%" class="e-chart-border" :chart-data="annularPieDataThird"/>
      </div>
      <div class="con-main">
        <div class="main-table">
          <div class="table-item item-1">
            <div class="item-col col-1"/>
            <div class="item-col col-2">日产量</div>
            <div class="item-col col-3">月产量</div>
            <div class="item-col col-4">3日计划量</div>
            <div class="item-col col-5">计划完成率%</div>
          </div>
          <!--         泵轴  -->
          <div class="table-item item-2">
            <div class="item-col col-1">转轴</div>
            <div class="item-col col-2 bg">{{ this.tableObject.spiale.dayYield }}</div>
            <div class="item-col col-3 bg">{{ this.tableObject.spiale.monthYield }}</div>
            <div class="item-col col-4 bg">{{ this.tableObject.spiale.orderQuantity }}</div>
            <div class="item-col col-5 bg">{{ parseInt(this.tableObject.spiale.orderQuantityRate * 100) }}</div>
          </div>
          <!--         转轴  -->
          <div class="table-item item-3">
            <div class="item-col col-1">泵轴</div>
            <div class="item-col col-2 bg">{{ this.tableObject.shaft.dayYield }}</div>
            <div class="item-col col-3 bg">{{ this.tableObject.shaft.monthYield }}</div>
            <div class="item-col col-4 bg">{{ this.tableObject.shaft.orderQuantity }}</div>
            <div class="item-col col-5 bg">{{ parseInt(this.tableObject.shaft.orderQuantityRate * 100) }}</div>
          </div>
          <!--         转子  -->
          <div class="table-item item-4">
            <div class="item-col col-1">转子</div>
            <div class="item-col col-2 bg">{{ this.tableObject.rotor.dayYield }}</div>
            <div class="item-col col-3 bg">{{ this.tableObject.rotor.monthYield }}</div>
            <div class="item-col col-4 bg">{{ this.tableObject.rotor.orderQuantity }}</div>
            <div class="item-col col-5 bg">{{ parseInt(this.tableObject.rotor.orderQuantityRate * 100) }}</div>
          </div>
        </div>
        <SimEcharts height="38%" class="e-chart-border" :chart-data="lineData"/>
        <SimEcharts height="39%" class="e-chart-border" :chart-data="barDoubleData"/>
      </div>
      <div class="con-right">
        <div class="right-header">
          <span class="rh-item item-1">异常信息: {{ abnormalInfo.untreated + abnormalInfo.processed }}</span>
          <span class="rh-item item-2">已处理: {{ abnormalInfo.processed }}</span>
          <span class="rh-item item-3">未处理: {{ abnormalInfo.untreated }}</span>
        </div>
        <div ref="rightTable" class="right-table">
          <template v-for="(item, index) in abnormalInfoList">
            <div :key="index" class="table-item"
                 :class="[item.state === '0'?'yi-chang': item.state === '1'?'jin-gao': 'dai-ding']">
              <span class="item-day">{{ item.DAY }}</span>
              <span class="item-device">【{{ item.device }}】</span>-
              <span class="item-type">{{ item.andon_type_name }}</span>
            </div>
          </template>
        </div>
        <SimEcharts height="39%" class="e-chart-border" :chart-data="QAnnulPieData"/>
      </div>
    </div>
  </div>
</template>
<script>
import {
  selectBoardQuantity,
  selectAbnormalInformation,
  selectFPY,
  selectQuantity,
  selectCDRS,
  selectProjectExecute,
  selectProjectComplete,
  selectQuantityMoon
} from '@/api/service-module/report/SpindleDashboard'
import * as echarts from 'echarts'
import {connectWebsocket, sendMessage} from "@/api/websocket";

export default {
  name: 'SpindleProductDashboard',
  data() {
    return {
      shut: '6',
      action: '8',
      halt: '9',
      anomaly: '6',
      nowDate: '',
      selectedData: [],
      tableObject: {
        spiale: {
          dayYield: 0,
          monthYield: 0,
          orderQuantity: 0,
          orderQuantityRate: 0
        },
        shaft: {
          dayYield: 0,
          monthYield: 0,
          orderQuantity: 0,
          orderQuantityRate: 0
        },
        rotor: {
          dayYield: 0,
          monthYield: 0,
          orderQuantity: 0,
          orderQuantityRate: 0
        }
      },
      abnormalInfo: {
        processed: 0,
        untreated: 0
      },
      abnormalInfoList: [],
      tempFPYDATA: new Set([]),
      lineData: {
        backgroundColor: '#010d13',
        textStyle: {
          color: '#b3babe'
        },
        legend: {
          type: 'plain',
          top: 15,
          right: '2%',
          textStyle: {
            fontSize: '100%'
          },
          itemGap: 40,
          itemWidth: 40,
          itemHeight: 20,
          data: [{
            name: '泵轴直通率',
            textStyle: {
              color: '#17a7ea',
              fontSize: '100%'
            }
          }, {
            name: '转轴直通率',
            textStyle: {
              color: '#03dd32',
              fontSize: '100%'
            }
          }, {
            name: '转子直通率',
            textStyle: {
              color: '#eab90a',
              fontSize: '100%'
            }
          }
          ]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            axis: 'x'
          },
          padding: ['20%', '20%'],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          top: '30%',
          bottom: '12%',
          left: '8%',
          right: '5%'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisLabel: {
            fontSize: '90%',
            margin: 5,
            color: '#85d7f9'
          },
          data: []
        },
        yAxis: {
          name: '百分比(%)',
          nameTextStyle: {
            fontSize: '50%',
            color: '#3dcaff'
          },
          nameGap: 30,
          axisLine: true,
          axisLabel: {
            fontSize: '50%',
            color: '#3dcaff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#123144',
              width: 3
            }

          }
        },
        series: [{
          name: '泵轴直通率',
          data: [],
          type: 'line',
          smooth: true,
          showAllSymbol: true,
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#1466f5',
              fontSize: '50%'
            }
          },
          itemStyle: {
            normal: {
              color: '#3A84FF',
              lineStyle: {
                color: '#3A84FF',
                width: 1
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(33,95,218,0.36)' // 100% 处的颜色
                  }]
                }
              }
            }
          }
        }, {
          name: '转轴直通率',
          data: [],
          type: 'line',
          showAllSymbol: true,
          smooth: true,
          label: {
            show: true,
            position: 'bottom',
            textStyle: {
              color: '#0be728',
              fontSize: '50%'
            }
          },
          itemStyle: {
            normal: {
              color: '#87f638',
              lineStyle: {
                color: '#4eff3a',
                width: 1
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(31,252,35,0.27)' // 100% 处的颜色
                  }]
                }
              }
            }
          }
        }, {
          name: '转子直通率',
          data: [],
          type: 'line',
          showAllSymbol: true,
          smooth: true,
          label: {
            show: true,
            position: 'right',
            textStyle: {
              color: '#f6f20a',
              fontSize: '50%'
            }
          },
          itemStyle: {
            normal: {
              color: '#f8e537',
              lineStyle: {
                color: '#f8f531',
                width: 1
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(238,188,5,0.29)' // 100% 处的颜色
                  }]
                }
              }
            }
          }
        }
        ]
      },
      barDoubleData: {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '10%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: [
            {
              name: '泵轴产能',
              textStyle: {
                color: '#4bdfff',
                fontSize: '100%'
              }
            }, {
              name: '转轴产能',
              textStyle: {
                color: '#5dc1fd',
                fontSize: '100%'
              }
            }, {
              name: '转子产能',
              textStyle: {
                color: '#55f49c',
                fontSize: '100%'
              }
            }
          ],
          left: '7%',
          top: '5%',
          textStyle: {
            fontSize: '100%',
            color: '#666666'
          },
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 25
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#3dcaff'

            }
          },
          axisLabel: {
            textStyle: {
              color: '#3dcaff'
            }
          }
        },

        yAxis: [{
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#3dcaff'
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#3dcaff'
            }
          }
          // axisLine: {
          //   lineStyle: {
          //     color: '#cdd5e2'
          //   }
          // },
        }, {
          type: 'value',
          nameTextStyle: {
            color: '#3dcaff'
          },
          position: 'right',
          axisLine: {
            lineStyle: {
              color: '#3dcaff'
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: 'value',
            textStyle: {
              color: '#3dcaff'
            }
          }
        }
        ],
        series: [{
          name: '泵轴产能',
          type: 'bar',
          barWidth: '12%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#29acff'
              }, {
                offset: 1,
                color: '#4bdfff'
              }]),
              barBorderRadius: 6,
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: '#fcfcfc',
                  fontSize: 12
                }
              }
            }
          },
          data: []
        }, {
          name: '转轴产能',
          type: 'bar',
          barWidth: '12%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#3d93f2'
              },
                {
                  offset: 1,
                  color: '#5dc1fd'
                }]),
              barBorderRadius: 6,
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: '#fcfcfc',
                  fontSize: 12
                }
              }
            }
          },
          data: []
        }, {
          name: '转子产能',
          type: 'bar',
          barWidth: '12%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#01c871'
              }, {
                offset: 1,
                color: '#55f49c'
              }]),
              barBorderRadius: 6,
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: '#fcfcfc',
                  fontSize: 12
                }
              }
            }
          },
          data: []
        }
        ]
      },
      annularPieDataTop: {
        title: {
          text: '设备运行状况',
          x: 'left',
          Y: 'top',
          textStyle: {
            color: '#929191',
            fontSize: '100%'
          }
        },
        tooltip: {
          top: 'item',
          formatter: ' {b}: {c} '
        },
        // legend: {
        //   left: 'center',
        //   top: 'bottom',
        //   textStyle: {
        //     color: '#05f6a4'
        //   }
        // },
        series: [
          {
            type: 'pie',
            radius: ['40%', '75%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#03f6c1',
              borderWidth: 2,
              normal: {
                label: {
                  show: true,
                  formatter: '{b} \n {c} ',
                  textStyle: {
                    color: '#f0f3f3',
                    fontSize: '100%',
                    fontFamily: 'Microsoft YaHei',
                    fontStyle: 'normal'
                  }
                },
                labelLine: {
                  show: true,
                  length: 4
                }
              }
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,
              show: true,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '100%',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 30
            },
            data: [
              {value: this.shut, name: '停机', color: '#575656'},
              {value: this.action, name: '运行', color: '#14ef06'},
              {value: this.halt, name: '待机', color: '#078dec'},
              {value: this.anomaly, name: '异常', color: '#d21111'}
            ]
          }
        ]
      },
      annularPieDataSecond: {
        series: [{
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 1,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 1,
              color: [
                [0.25, '#FF6E76'],
                [0.5, '#FDDD60'],
                [0.75, '#58D9F9'],
                [1, '#7CFFB2']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '50%',
            width: 5,
            offsetCenter: [0, '100%'],
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: 'auto',
              width: 5
            }
          },
          axisLabel: {
            color: '#959595',
            fontSize: 20,
            distance: -60,
            formatter: function (value) {
              if (value === 0.875) {
                return '优'
              } else if (value === 0.625) {
                return '中'
              } else if (value === 0.375) {
                return '良'
              } else if (value === 0.125) {
                return '差'
              }
            }
          },
          title: {
            offsetCenter: [0, '50%'],
            fontSize: 30,
            textStyle: {
              color: '#fff'
            }
          },
          detail: {
            fontSize: 50,
            offsetCenter: [1, '100%'],
            valueAnimation: true,
            formatter: function (value) {
              return Math.round(value * 100) + '%'
            },
            color: 'auto'
          },
          data: [{
            value: 0.7,
            name: '三日开工率'
          }]
        }]
      },
      annularPieDataThird: {
        series: [{
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 1,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 1,
              color: [
                [0.25, '#FF6E76'],
                [0.5, '#FDDD60'],
                [0.75, '#58D9F9'],
                [1, '#7CFFB2']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '50%',
            width: 5,
            offsetCenter: [0, '100%'],
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: 'auto',
              width: 5
            }
          },
          axisLabel: {
            color: '#959595',
            fontSize: 20,
            distance: -60,
            formatter: function (value) {
              if (value === 0.875) {
                return '优'
              } else if (value === 0.625) {
                return '中'
              } else if (value === 0.375) {
                return '良'
              } else if (value === 0.125) {
                return '差'
              }
            }
          },
          title: {
            offsetCenter: [0, '50%'],
            fontSize: 30,
            textStyle: {
              color: '#fff'
            }
          },
          detail: {
            fontSize: 50,
            offsetCenter: [1, '100%'],
            valueAnimation: true,
            formatter: function (value) {
              return Math.round(value * 100) + '%'
            },
            color: 'auto'
          },
          data: [{
            value: 0.70,
            name: '三日完工率'
          }]
        }]
      },
      QAnnulPieData: {
        title: {
          text: '月工单运行情况',
          // subtext:'单位：万m³',
          left: 'center',
          top: 0,
          textStyle: {
            fontSize: 20,
            color: '#908f8f'
          },
          subtextStyle: {
            color: '#faf8f8'
          }

        },
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}'
        },
        color: ['rgba(74,199,245,0.76)', 'rgba(66,164,235,0.8)',
          'rgba(106,149,194,0.82)', 'rgba(74,114,160,0.72)',
          'rgba(8,93,147,0.72)', '#054c68'],
        legend: {
          show: false,
          left: '55%',
          top: '50%',
          orient: 'vertical',
          itemGap: 12,
          itemWidth: 10,
          itemHeight: 2,
          icon: 'rect',
          // data: ['有林地','疏林地'],
          textStyle: {
            color: [],
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: '100%'
          }
        },
        series: [{
          name: '',
          type: 'pie',
          // clockwise: false, //饼图的扇区是否是顺时针排布
          minAngle: 5,
          center: ['48%', '55%'],
          radius: ['26%', '41%'],
          avoidLabelOverlap: true,
          labelLine: {
            length: window.screen.height > 961 ? '1' : '1'
          },
          label: {
            normal: {
              show: true,
              position: 'outside',
              formatter: '{b}\n\n{c}',
              textStyle: {
                color: '#fff',
                fontSize: 20
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                fontWeight: 'bold'
              }
            }
          },
          data: [
            {value: '', name: '泵轴待开工数量'},
            {value: '', name: '泵轴计划数量'},
            {value: '', name: '泵轴完成数量'},
            {value: '', name: '转子待开工数量'},
            {value: '', name: '转子计划数量'},
            {value: '', name: '转子完成数量'},
            {value: '', name: '转轴待开工数量'},
            {value: '', name: '转轴计划数量'},
            {value: '', name: '转轴完成数量'}
          ]
        }]
      }
    }
  },
  created() {
    // this.initData()
    this.initWebData()
    this.reloadWeb()
  },
  mounted() {
    this.timer1 = setInterval(this.formatDate, 1000)
    // this.timer2 = setInterval(this.initData, 15 * 1000)
    this.rollText()
  },
  destroyed() {
    window.clearInterval(this.timer1)
    // window.clearInterval(this.timer2)
  },
  methods: {
    reloadWeb() {
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload, 1000 * 60 * 60 * 8)
    },
    initWebData() {
      connectWebsocket(
          // 测试地址
          process.env.VUE_APP_WS_URL + '/RotatingShaftWKWebSocket/RotatingShaftWK',
          // 传递给后台的数据
          {},
          // 成功拿到后台返回的数据的回调函数
          (data) => {
            // this.tmp = JSON.parse(data)
            console.log(JSON.parse(data))
            this.tableObject = JSON.parse(data).boardQuantity

            this.abnormalInfo = JSON.parse(data).abnormalInformation.abnormalInformationCollect
            this.abnormalInfoList = JSON.parse(data).abnormalInformation.abnormalInformation
            this.querySelectFPY(JSON.parse(data).selectFPY)
            this.querySelectQuantity(JSON.parse(data).selectQuantity)
            this.querySelectCDRS(JSON.parse(data).selectCollDeviceRun)
            this.querySelectProjectExecute(JSON.parse(data).projectExecute)
            this.querySelectProjectComplete(JSON.parse(data).projectComplete)
            this.querySelectQuantityMoon(JSON.parse(data).quantityMoon)
          },
          () => {
            sendMessage("im tird!")
          }
      )
    },

    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    },
    initData() {
      this.selectBoardQua()
      this.AbnormalInformation()
      this.querySelectFPY()
      this.querySelectQuantity()
      this.querySelectCDRS()
      this.querySelectProjectExecute()
      this.querySelectProjectComplete()
      this.querySelectQuantityMoon()
    },
    selectBoardQua() {
      selectBoardQuantity().then(res => {
        if (res.code === '200') {
          this.tableObject = res.data
        }
      })
    },
    AbnormalInformation() {
      selectAbnormalInformation().then(res => {
        if (res.code === '200') {
          this.abnormalInfo = res.data.abnormalInformationCollect
          this.abnormalInfoList = res.data.abnormalInformation
          console.log(res)
        }
      })
    },
    rollText() {
      let speed = 280
      let that = this
      let tmpHi = 0

      function Marquee() {
        if (that.$refs.tableContent) {
          tmpHi = that.$refs.tableContent.scrollTop++
          if (tmpHi === that.$refs.tableContent.scrollTop) {
            that.$refs.tableContent.scrollTop = 0
          }
        }
      }

      setInterval(Marquee, speed)
    },
    querySelectFPY(data) {
      // selectFPY().then(res => {
      for (var i in data) {
        if (i === 'rotor') {
          for (let j in data[i]) {
            // console.log("j"+'----'+ j)
            for (var k in data[i][j]) {
              if (typeof (data[i][j][k]) === 'number') {
                this.lineData.series[2].data.push(parseInt(data[i][j][k]))
              }
            }
          }
        }
        if (i === 'spiale') {
          for (j in data[i]) {
            for (k in data[i][j]) {
              if (typeof (data[i][j][k]) === 'number') {
                this.lineData.series[1].data.push(parseInt(data[i][j][k]))
              }
            }
          }
        }
        if (i === 'shaft') {
          for (j in data[i]) {
            for (k in data[i][j]) {
              if (typeof (data[i][j][k]) === 'number') {
                this.lineData.series[0].data.push(parseInt(data[i][j][k]))
              }
            }
          }
        }

        for (j in data[i]) {
          for (k in data[i][j]) {
            if (isNaN(data[i][j][k]) && !isNaN(Date.parse(data[i][j][k]))) {
              this.tempFPYDATA.add(data[i][j][k])
            }
          }
        }
      }
      this.lineData.xAxis.data = Array.from(this.tempFPYDATA)
    },
    querySelectQuantity(data) {
      let barDouble = new Set([])
      // selectQuantity().then(res => {
      for (var i in data) {
        if (i === 'rotor') {
          for (var j in data[i]) {
            // console.log("j"+'----'+ j)
            for (var k in data[i][j]) {
              if (typeof (data[i][j][k]) === 'number') {
                this.barDoubleData.series[2].data.push(data[i][j][k])
              }
            }
          }
        }
        if (i === 'spiale') {
          for (j in data[i]) {
            for (k in data[i][j]) {
              if (typeof (data[i][j][k]) === 'number') {
                this.barDoubleData.series[1].data.push(data[i][j][k])
              }
            }
          }
        }
        if (i === 'shaft') {
          for (j in data[i]) {
            for (k in data[i][j]) {
              if (typeof (data[i][j][k]) === 'number') {
                this.barDoubleData.series[0].data.push(data[i][j][k])
              }
            }
          }
        }

        for (j in data[i]) {
          for (k in data[i][j]) {
            if (isNaN(data[i][j][k]) && !isNaN(Date.parse(data[i][j][k]))) {
              barDouble.add(data[i][j][k])
            }
          }
        }
      }
      this.barDoubleData.xAxis.data = Array.from(barDouble)
      // })
    },
    querySelectCDRS(data) {
      // selectCDRS().then(res => {
      for (var i in data) {
        if (i == 'shut') {
          this.shut = data[i]
        }
        if (i == 'action') {
          this.action = data[i]
        }
        if (i == 'halt') {
          this.halt = data[i]
        }
        if (i == 'anomaly') {
          this.anomaly = data[i]
        }
      }
      this.annularPieDataTop.series[0].data[0].value = this.shut
      this.annularPieDataTop.series[0].data[1].value = this.action
      this.annularPieDataTop.series[0].data[2].value = this.halt
      this.annularPieDataTop.series[0].data[3].value = this.anomaly
      // })
    },
    querySelectProjectExecute(data) {
      // selectProjectExecute().then(res => {
      for (var i in data) {
        this.annularPieDataSecond.series[0].data[0].value = data[i]
      }
      // })
    },
    querySelectProjectComplete(data) {
      // selectProjectComplete().then(res => {
      for (const i in data) {
        this.annularPieDataThird.series[0].data[0].value = data[i]
      }
      // })
    },
    querySelectQuantityMoon(data) {
      // selectQuantityMoon().then(res => {
      this.QAnnulPieData.series[0].data[0].value = data['shaftMoon']['productionNumber']
      this.QAnnulPieData.series[0].data[1].value = data['shaftMoon']['newNumber']
      this.QAnnulPieData.series[0].data[2].value = data['shaftMoon']['completeNumber']
      this.QAnnulPieData.series[0].data[3].value = data['rotorMoon']['productionNumber']
      this.QAnnulPieData.series[0].data[4].value = data['rotorMoon']['newNumber']
      this.QAnnulPieData.series[0].data[5].value = data['rotorMoon']['completeNumber']
      this.QAnnulPieData.series[0].data[6].value = data['spialeMoon']['productionNumber']
      this.QAnnulPieData.series[0].data[7].value = data['spialeMoon']['newNumber']
      this.QAnnulPieData.series[0].data[8].value = data['spialeMoon']['completeNumber']
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
/* 小分辨率设备 (平板、电视机或者安卓设备, 960px and down) */
@media only screen and (max-width: 960px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;

      h3 {
        margin-top: 6px;
        margin-bottom: 0;
      }

      p {
        margin-top: 0;
      }
    }

    .report-main {
      height: calc(100% - 52px);
      display: flex;

      .con-left {
        width: 25%;
        height: 100%;

        .e-chart-border {
          border: 1px solid rgba(32, 160, 255, 0.13);
          margin-bottom: 1%;
        }
      }

      .con-main {
        margin: 0 1%;
        width: 48%;
        height: 100%;

        .main-table {
          border: 1px solid rgba(32, 160, 255, 0.09);
          margin-bottom: 1%;
          height: 20%;

          .table-item {
            display: flex;
            height: 25%;
            font-weight: bolder;

            .item-col {
              text-align: center;
              color: #84A4C7;
              width: 100%;
            }
          }
        }

        .e-chart-border {
          border: 1px solid rgba(32, 160, 255, 0.11);
          margin-bottom: 1%;
        }
      }

      .con-right {
        width: 25%;
        height: 100%;

        .right-header {
          height: 30px;
          margin-bottom: 1%;

          .rh-item {
            font-weight: bolder;
            margin-right: 10px;
          }

          .item-1 {
            color: #20a0ff
          }

          .item-2 {
            color: #55f49c
          }

          .item-3 {
            color: #FF7070
          }
        }

        .right-table {
          height: calc(58% - 30px);
          border: 1px solid rgba(32, 160, 255, 0.36);
          margin-bottom: 2%;
          overflow: hidden;
          padding: 2px 4px;

          .table-item {
            height: 28px;
            line-height: 28px;
            margin-bottom: 4px;

            .item-day {
              margin-left: 10px;
              display: inline-block;
            }

            //.item-device {
            //  width: 114px;
            //  display: inline-block;
            //}
            //.item-type {
            //  width: 76px;
            //  display: inline-block;
            //}
          }

          .yi-chang {
            color: #FF7070;
            border-left: 4px solid #FF7070;
          }

          .jin-gao {
            color: #FF7070;
            border-left: 4px solid #FF7070;
          }

          .dai-ding {
            color: #FF7070;
            border-left: 4px solid #FF7070;
          }
        }

        .e-chart-border {
          border: 1px solid rgba(32, 160, 255, 0.1);
          margin-top: 1%;
        }
      }
    }
  }
}

/* 大分辨率设备 (工作站或者台式机, 961px and up) */
@media only screen and (min-width: 961px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    height: 100vh;
    font-size: 12px;
    margin-top: -1.5vh;

    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;

      h3 {
        margin-top: 6px;
        margin-bottom: 0;
      }

    }

    .report-main {
      height: 100vh;
      display: flex;
      margin-top: 1rem;

      .con-left {
        width: 25%;
        height: 100%;

        .e-chart-border {
          border: 1px solid rgba(32, 160, 255, 0.13);
          margin-bottom: 1%;
        }
      }

      .con-main {
        margin: 0 1%;
        width: 48%;
        height: 100%;

        .main-table {
          border: 1px solid rgba(32, 160, 255, 0.09);
          margin-bottom: 1%;
          height: 20%;

          .table-item {
            display: flex;
            height: 25%;
            font-weight: bolder;

            .item-col {
              text-align: center;
              color: #84A4C7;
              width: 100%;
            }
          }
        }

        .e-chart-border {
          border: 1px solid rgba(32, 160, 255, 0.11);
          margin-bottom: 1%;
        }
      }

      .con-right {
        width: 25%;
        height: 100%;

        .right-header {
          height: 30px;
          margin-bottom: 1%;

          .rh-item {
            font-weight: bolder;
            margin-right: 10px;
          }

          .item-1 {
            color: #20a0ff
          }

          .item-2 {
            color: #55f49c
          }

          .item-3 {
            color: #FF7070
          }
        }

        .right-table {
          height: calc(58% - 30px);
          border: 1px solid rgba(32, 160, 255, 0.36);
          margin-bottom: 2%;
          overflow: hidden;
          padding: 2px 4px;

          .table-item {
            height: 28px;
            line-height: 28px;
            margin-bottom: 4px;

            .item-day {
              margin-left: 10px;
              display: inline-block;
            }

            //.item-device {
            //  width: 114px;
            //  display: inline-block;
            //}
            //.item-type {
            //  width: 76px;
            //  display: inline-block;
            //}
          }

          .yi-chang {
            color: #FF7070;
            border-left: 4px solid #FF7070;
          }

          .jin-gao {
            color: #FF7070;
            border-left: 4px solid #FF7070;
          }

          .dai-ding {
            color: #FF7070;
            border-left: 4px solid #FF7070;
          }
        }

        .e-chart-border {
          border: 1px solid rgba(32, 160, 255, 0.16);
          margin-top: 1%;
        }
      }
    }
  }
}

</style>
